<!--
@description ：选择小程序
-->

<template>
  <div>
    <NormalForm :formList="formList" :isShowCard="false" :operateForm="query" pageTitle=""
                @handleQuery="handleQuery" @handleReset="handleReset" :enum-opt="enumopt"></NormalForm>
    <el-table ref="multipleTable" :data="tableList" height="456" row-key="id" style="width: 100%"
              @select="handleSelectionChange" @select-all="handleSelectionAll" v-loading="loading">
      <el-table-column :reserve-selection="true" type="selection" width="55"></el-table-column>
      <el-table-column align="center" prop="name" label="路径标题" min-width="130" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="path" label="小程序路径" min-width="140" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="pictureUrl" label="路径图像" min-width="100">
        <template slot-scope="scope">
          <img :src="scope.row.pictureUrl" alt="" style="width: 60px;height: 70px">
        </template>
      </el-table-column>
      <el-table-column align="center" prop="remark" label="备注" min-width="140" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="createBy" label="创建人" min-width="140"></el-table-column>
      <el-table-column align="center" prop="updateTime" label="更新时间" min-width="160"></el-table-column>
    </el-table>
    <NormalPagination :currentPage="query.pageNum" :pageSize="query.pageSize" :pageSizeList="[10, 20, 30]"
                      :total="total" @handleCurrentChange="handleCurrentChange"
                      @handleSizeChange="handleSizeChange"></NormalPagination>
    <div class="btn-list">
      <el-button type="info" @click="selectCancelFn">取消</el-button>
      <el-button type="primary" @click="selectSureFn">确定</el-button>
    </div>
  </div>
</template>
<script>
import { queryProgramList, queryProgramSelect } from "@/api/smallProgram";

export default {
  props: {
    linkList: {
      type: Array,
      default: () => []
    },
  },
  components: {},
  data() {
    return {
      query: {
        pageNum: 1,
        pageSize: 20,
        smallId: '',
        name: '',
      },
      total: 0,
      tableList: [],
      currentSelectList: [],
      formList: [
        {
          label: '小程序',
          value: '',
          prop: 'smallId',
          type: 'SELECT',
          emunName: 'programList',
          xl: 6,
        },
        {
          label: '路径标题',
          value: '',
          prop: 'name',
          type: 'INPUT',
          emunName: '',
          xl: 6,
        },
      ],
      enumopt: {
        programList: [],
      },
      loading: false,
    }
  },
  watch: {},
  methods: {
    selectSureFn() {
      this.$emit("confirm", this.currentSelectList);
      this.$refs.multipleTable.clearSelection();
    },
    selectCancelFn() {
      this.$emit("selectCancelFn");
    },
    handleQuery() {
      this.query.pageNum = 1
      this.getListFn()
    },
    handleReset() {
      this.query = {
        pageNum: 1,
        pageSize: 20,
        smallId: this.enumopt.programList[0].dictValue || '',
        name: '',
      }
      this.getListFn()
    },
    getListFn() {
      let params = {
        ...this.query
      }
      this.loading = true
      queryProgramSelect(params).then(res => {
        this.tableList = res.rows
        this.tableList.forEach(element => {
          element.checked = false;
        })
        console.log(this.tableList, this.currentSelectList, 'ao')
        this.currentSelectList.length > 0 && this.tableList.forEach(element => {
          this.currentSelectList.forEach(item => {
            if (item.mediaType == 66 && element.pathId == item.pathId) {
              element.checked = true;
              this.$refs.multipleTable.toggleRowSelection(element, true);
            }
          })
        })
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    handleSizeChange(val) {
      this.query.pageNum = 1;
      this.query.pageSize = val;
      this.tableList = [];
      this.total = 0;
      this.handleQuery()
    },
    handleCurrentChange(val) {
      this.query.pageNum = val;
      this.handleQuery()
    },
    handleSelectionChange(valList, newVal) {
      newVal.checked = !newVal.checked
      if (newVal.checked) {
        this.currentSelectList.push({
          name: newVal.name,
          id: newVal.id,
          mediaType: '66',
          materialType: '66',
          materialName: newVal.name,
          materialUrl: newVal.link,
          pathId: newVal.pathId,
        })
      } else {
        this.currentSelectList.forEach((element, index) => {
          if (newVal.mediaType == 99 && element.id == newVal.id)
            this.currentSelectList.splice(index, 1);
        })
      }
    },
    handleSelectionAll(valList) {
      // console.log(valList)
      if (valList.length > 0) {
        valList.forEach(element => {
          this.currentSelectList.push({
            name: newVal.name,
            id: newVal.id,
            mediaType: '66',
            materialType: '66',
            materialName: newVal.name,
            materialUrl: newVal.link,
          })
        })

        let unique = []
        let arr = this.currentSelectList
        for (const item of arr) {
          const isDuplicate = unique.find((obj) => obj.id === item.id);
          if (!isDuplicate) {
            unique.push(item);
          }
        }
        this.currentSelectList = unique
      } else {
        this.tableList.forEach(element => {
          this.currentSelectList.forEach((item, index) => {
            if (item.mediaType == 66 && element.riskId == item.id) {
              element.checked = false;
              this.currentSelectList.splice(index, 1);
            }
          })
        })
      }
    },
  },
  mounted() {
    console.log(this.linkList, 'linkList')
    this.currentSelectList = JSON.parse(JSON.stringify(this.linkList))
    queryProgramList().then(res => {
      this.enumopt.programList = res.rows ? res.rows.map(item => {
        return  {
          dictValue: item.smallId,
          dictLabel: item.name
        } }) : []
      if(this.enumopt.programList.length > 0) this.query.smallId = this.enumopt.programList[0].dictValue
      this.$set(this.enumopt, 'programList', this.enumopt.programList)
      this.$set(this.query, 'smallId', this.query.smallId)
      this.handleQuery()
     })
  },
  created() {
  },
}

</script>

<style lang="scss" scoped>

.btn-list {
  margin-top: 10px;
  text-align: right;
}

</style>
